<!--
 * @Date: 2023-03-14 14:28:15
 * @LastEditTime: 2023-04-20 13:09:52
 * @FilePath: /nlk/src/views/home/components/userinfo.vue
 * 介绍:首页.用户信息
-->
<script lang="ts" setup>
import { formatNumber, _require } from "@@/utils/tools/tools";
import { HomeData } from "@@/api/page/home";
const props = defineProps<{
  homeData: HomeData.Res | undefined;
}>();
</script>

<template>
  <div class="userinfo auto-MT-lg">
    <h3 class="C-M1 T-A-C">{{ $t("zong-zi-chan") }}</h3>
    <h1 class="T-A-C MT-0 C-T5">${{ formatNumber(homeData?.total, 4) }}</h1>
    <!-- 资产列举 -->
    <Cgrid col="3" repeat="1fr" class="T-S-xs MT-xxl">
      <div class="T-A-C">
        <h3>{{ formatNumber(homeData?.usdt) }}</h3>
        <span>{{ $t("ke-yong-yu-e") }} <span>(USD)</span> </span>
      </div>
      <div class="T-A-C">
        <h3>{{ formatNumber(homeData?.amount_held) }}</h3>
        <span>{{ $t("chi-cang-jin-e") }} <span>(USD)</span></span>
      </div>
      <div class="T-A-C">
        <h3>{{ formatNumber(homeData?.accumulated_income) }}</h3>
        <span>{{ $t("lei-ji-shou-yi") }} <span>(USD)</span></span>
      </div>
    </Cgrid>

    <!-- 金刚区 -->
    <Cgrid col="3" repeat="1fr" class="T-S-sm">
      <div @click="$router.push({ name: 'topUpCoin' })" class="T-A-C active">
        <Rimage
          height="40rem"
          width="40rem"
          :src="_require('src/assets/images/icons/chong-bi.svg')"
        />
        <div>{{ $t("chong-bi") }}</div>
      </div>
      <div @click="$router.push({ name: 'coinExchange' })" class="T-A-C active">
        <Rimage
          height="40rem"
          width="40rem"
          :src="_require('src/assets/images/icons/ti-bi.svg')"
        />
        <div>{{ $t("shan-dui") }}</div>
      </div>
      <div @click="$router.push({ name: 'withdrawCoin' })" class="T-A-C active">
        <Rimage
          height="40rem"
          width="40rem"
          :src="_require('src/assets/images/icons/shan-dui.svg')"
        />
        <div>{{ $t("ti-bi") }}</div>
      </div>
    </Cgrid>
  </div>
</template>

<style lang="less" scoped>
.userinfo {
  padding: var(--gap-md);
}
</style>
